<!-- 虚拟券奖品详情 -->
<template>
  <a-drawer
    v-model:visible="vdata.visible"
    :maskClosable="false"
    :title="'虚拟券奖品详情'"
    :body-style="{ paddingBottom: '80px' }"
    width="40%" 
    :close="onClose"
    :footer="null"
  >
    <a-row justify="space-between" type="flex">
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="虚拟券名称">
            {{ vdata.detailData.virtualCouponName }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="数量">
            {{ vdata.detailData.virtualCouponNum }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="预算">
            {{ vdata.detailData.virtualCouponAmount }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="批次号">
            {{ vdata.detailData.batchNo }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="批次名称">
            {{ vdata.detailData.batchName }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <!-- <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="商户号">
            {{ vdata.detailData.mchNo }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col> -->
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="机构号">
            {{ vdata.detailData.agentNo }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <!-- <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="虚拟券有效期开始时间">
            {{ vdata.detailData.sTime }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="虚拟券有效期结束时间">
            {{ vdata.detailData.eTime }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col> -->
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="创建者ID">
            {{ vdata.detailData.createdUid }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="使用规则">
            <div v-for="(value,key,index) in vdata.detailData.rule" style="margin-right: 20px;">
              {{ key }} : {{ value }}
            </div>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="备注">
            <a-textarea :value="vdata.detailData.remark" :rows="3" disabled />
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
  </a-drawer>
</template>

<script lang="ts" setup>
import { req, API_URL_AWARD_VIRTUAL_DETAILS } from '@/api/manage'
import { reactive } from 'vue'
import { useUserStore } from '@/store/modules/user'

const vdata: any = reactive({
  btnLoading: false,
  detailData: {}, // 数据对象
  recordId: null, // 更新对象ID
  visible: false, // 是否显示弹层/抽屉
})

/**
 * 进度条
 * @param isShowGlobalLoadingVal 
 */
function myGlobalLoadingFunc(isShowGlobalLoadingVal) {
  useUserStore().setGlobalLoading(isShowGlobalLoadingVal)
}

// 弹层打开事件
function show(virtualCouponId) {
  // 虚拟券详情
  getVirtualCouponDetail(virtualCouponId)
  vdata.visible = true
}
// 获取虚拟券详情
async function getVirtualCouponDetail(virtualCouponId){
  try {
    myGlobalLoadingFunc(true)
    const res = await req.list(API_URL_AWARD_VIRTUAL_DETAILS,{virtualId :virtualCouponId })
    vdata.detailData = { ...res, rule: JSON.parse(res.rule) }
  } finally {
    myGlobalLoadingFunc(false)
  }
}
function onClose() {
  vdata.visible = false
}
defineExpose({
  show //抛出show函数给父组件
})
</script>
